<template>
  <div>
    <div class="topSearch">
      <p><span>产品名称：</span>
        <el-input v-model="params.productName" clearable size="small" style="width: 200px"
                  placeholder="请输入产品名称"></el-input>
      </p>
      <p><span>产品编码：</span>
        <el-input v-model="params.productCode" clearable size="small" style="width: 200px"
                  placeholder="请输入产品编码"></el-input>
      </p>
      <p><span>产品品牌：</span>
        <el-select v-model="params.type" clearable size="small" style="width: 200px" placeholder="请选择产品品牌"
                   @change="changeSystem">
          <el-option v-for="item in systemList" :label="item.brandName" :value="item.materialBrandId"
                     :key="item.materialBramdId"></el-option>
        </el-select>
      </p>
      <p><span>产品类型：</span>
        <el-select v-model="params.pickingId" clearable size="small" style="width: 200px" placeholder="请选择产品类型">
          <el-option v-for="item in titleList" :label="item.title" :value="item.pickingId"
                     :key="item.pickingId"></el-option>
        </el-select>
      </p>
      <p><span>是否杂项：</span>
        <el-select v-model="params.isAddition" clearable size="small" style="width: 200px" placeholder="请选择">
          <el-option v-for="item in isAdditionList" :label="item.name" :value="item.id"
                     :key="item.id"></el-option>
        </el-select>
      </p>
      <p><span>创建时间：</span>
        <el-date-picker
            v-model="sateValue"
            type="daterange"
            range-separator="至"
            clearable
            size="small"
            @change="selectTime"
            style="width: 250px"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        >
        </el-date-picker>
      </p>
      <p>
        <el-button size="small" type="info" @click="_reset">重置</el-button>
        <el-button size="small" type="primary" @click="_search">查询</el-button>
        <el-button size="small" type="primary" @click="_add" v-if="authority.includes(1271)">新增产品</el-button>
      </p>
    </div>
    <div class="centerTable">
      <el-table :data="productList" height="calc(100vh - 250px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
        <el-table-column prop="productName" label="产品名称"></el-table-column>
        <el-table-column prop="productCode" label="产品编码"></el-table-column>
        <el-table-column prop="type" label="产品品牌">
          <template v-slot:default="scope">
            {{ scope.row.type == 1 ? '零食很忙' : "赵一鸣" }}
          </template>
        </el-table-column>
        <el-table-column prop="isAddition" label="是否杂项">
          <template v-slot:default="scope">
          <span :style="{color: scope.row.isAddition == 0 ? '#1E90FF' : '#FF8C00',}">
            {{
              scope.row.isAddition == 0 ? '否' : '是'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="norms" label="规格"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
        <el-table-column prop="colour" label="颜色"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-link v-if="authority.includes(1271)" style="font-size: 13px;text-decoration: underline" type="primary"
                     @click="_edit(scope.row)">编 辑
            </el-link>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
          style="padding: 20px 0"
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
      >
      </el-pagination>

    </div>
    <el-dialog :close-on-click-modal="false" :visible.sync="addDialog" center :title="title" width="40%">
      <div class="inherit">
        <p><span>产品名称<i>*</i> ：</span>
          <el-input v-model="data.productName" clearable size="small" style="width: 250px"
                    placeholder="请输入产品名称"></el-input>
        </p>
        <p><span>产品代码<i>*</i> ：</span>
          <el-input :disabled="title=='编辑单品'" v-model="data.productCode" clearable size="small" style="width: 250px"
                    placeholder="请输入产品代码"></el-input>
        </p>
      </div>
      <div class="inherit">
        <p><span>产品品牌<i>*</i> ：</span>
          <el-select v-model="data.type" clearable size="small" style="width: 250px" placeholder="请选择产品品牌"
                     @change="changeSystem">
            <el-option v-for="item in systemList" :label="item.brandName" :value="item.materialBrandId"
                       :key="item.materialBramdId"></el-option>
          </el-select>
        </p>
        <p><span>产品类型<i>*</i> ：</span>
          <el-select v-model="data.pickingId" clearable size="small" style="width: 250px" placeholder="请选择产品类型">
            <el-option v-for="item in titleList" :label="item.title" :value="item.pickingId"
                       :key="item.pickingId"></el-option>
          </el-select>
        </p>
      </div>
      <div class="inherit">
        <p><span>是否杂项<i>*</i> ：</span>
          <el-select v-model="data.isAddition" clearable size="small" style="width: 250px" placeholder="请选择">
            <el-option v-for="item in isAdditionList" :label="item.name" :value="item.id"
                       :key="item.id"></el-option>
          </el-select>
        </p>
        <p><span>规格 ：</span>
          <el-input v-model="data.norms" clearable size="small" style="width: 250px" placeholder="请输入产品代码"></el-input>
        </p>
      </div>
      <div class="inherit">
        <p><span>单位 ：</span>
          <el-input v-model="data.unit" clearable size="small" style="width: 250px"
                    placeholder="请输入单位，如：个、件，套"></el-input>
        </p>
        <p><span>颜色 ：</span>
          <el-input v-model="data.colour" clearable size="small" style="width: 250px"
                    placeholder="请输入颜色，如：红色、黄色、蓝色"></el-input>
        </p>
      </div>
      <span slot="footer">
      <el-button size="small" @click="addDialog=false">取 消</el-button><el-button size="small"
                                                                                 type="primary"
                                                                                 @click="_submit">提 交</el-button> </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import quinn from "../../utils/quinn";

export default {
  name: "ProductManage",
  components: {},
  data() {
    return {
      addDialog: false,
      currentPage: 1,
      totalCount: 0,
      title: "",
      sateValue: "",
      data: {
        productName: "",
        productCode: "",
        type: "",
        pickingId: "",
        isAddition: "",
        norms: "",
        unit: "",
        colour: "",
      },
      editId: "",
      systemList: [],
      productList: [],
      authority: [],
      titleList: [],
      params: {
        pageSize: 20,
        pageNumber: 1,
        startTime: "",
        endTime: ""
      },
      isAdditionList: [{name: '否', id: 0}, {name: "是", id: 1}]
    };
  },
  created() {
    this.$api.materialGetMaterialBrandList().then(res => {
      this.systemList = res
    })
    this.getList()
    const {authorityList = []} = quinn.getStorage("userData")
    this.authority = authorityList;
  },
  methods: {
    _edit(row) {
      this.addDialog = true
      this.title = '编辑单品'
      this.editId = row.materialId
      Object.keys(this.data).forEach((key) => {
        if (row.hasOwnProperty(key)) {
          this.data[key] = row[key]
          this.data.materialId = row.materialId
          this.changeSystem(row.type)
        }
      })
    },
    _reset() {
      this.params = this.$options.data.call(this).params
      this.sateValue = ''
      this.getList()
    },
    _search() {
      this.params.pageNumber = 1
      this.getList()
    },
    getList() {
      this.$api.materialGetMaterialList(this.params).then(res => {
        this.productList = res.data
        this.totalCount = res.total
      })
    },
    _add() {
      this.addDialog = true
      this.title = '新增产品'
      this.data = this.$options.data.call(this).data
    },
    changeSystem(val) {
      if (!val) return
      this.$api.materialGetGoodsTitleList({
        materialBrandId: val
      }).then(res => {
        this.titleList = res
      })
    },
    async _submit() {
      const data1 = this.data
      try {
        const apiMap = {
          '新增产品': this.$api.materialAddMaterial,
          '编辑单品': this.$api.materialUpdateMaterialInfo
        };
        const apiFunc = apiMap[this.title];
        if (!apiFunc) return;
        const resDate = await apiFunc(data1);
        this.$message.success(`${this.title}成功！`);
        this.addDialog = false;
        this.getList()
      } catch (err) {
        console.error('接口请求出错：', err);
        this.$message.error('操作失败，请稍后重试');
      }
    },
    selectTime(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format('YYYY-MM-DD')
        this.params.endTime = dayjs(val[1]).format('YYYY-MM-DD')
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getList()
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-input.is-disabled .el-input__inner {
  color: #777;
}

/deep/ .el-dialog__title {
  color: #fff;
}

.inherit {
  display: flex;
  justify-content: space-between;
  margin-bottom: 35px;

  span {
    display: inline-block;
    width: 80px;
  }

  i {
    color: #ff4949;
  }
}

.topSearch {
  display: flex;
  flex-wrap: wrap;

  p {
    margin-right: 15px;
    margin-bottom: 10px;
  }
}
</style>

